<template>
  <div class="compitem">
    <div class="compname">{{title}}</div>
    <!-- <el-input style="width:150px;" v-model="value"></el-input> -->
    <el-time-picker
    style="width:135px;"
    v-model="start"
    class="date-box"
    format='HH:mm:ss'   
    placeholder="开始时间点"  
    value-format="HH:mm:ss"    
    :picker-options="{
        selectableRange:`00:00:00 -${end ? end+':00' : '23:59:00'}`
    }">
</el-time-picker>
<div style="padding:0 5px;">-</div>
     <el-time-picker
    v-model="end"
    style="width:135px;"

    format='HH:mm:ss'
    value-format="HH:mm:ss"
    placeholder="结束时间点"
    :picker-options="{
    selectableRange:`${start ?start+':00' : '00:00:00'}-23:59:59`
    
    }">
</el-time-picker>
  </div>
</template>
<script>
export default {
  props:{
   title:{
     type:String
   },
   name:{
     type:String
   },
   val:{
     type:String
   }
  },
  data() {
    return {
      // value:[new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      value:[],
      start:'',
      end:''
    }
  },
  created() {
    // this.value=this.val
    if(this.val){
      var time=JSON.parse(this.val)
          
          this.start=time[0]
          this.end=time[1]
    }
    
  },
  methods: {
    change(){

    },
  },
  watch: {
    
    value:function(params) {
      // console.log(this)
      // console.log("xxxxxxx")
      this.$emit('func',{name:this.name,val:this.value})
    },
    start:function(params) {
      // console.log("xxxxxxx")
      if(this.end && this.start){
      this.$emit('func',{name:this.name,val:[this.start,this.end]})

      }else{
      this.$emit('func',{name:this.name,val:[]})
      }
      // this.$emit('func',{name:this.name,val:this.value})
    },
    end:function(params) {
      // console.log("xxxxxxx")
      if(this.end && this.start){
      this.$emit('func',{name:this.name,val:[this.start,this.end]})
      }else{
      this.$emit('func',{name:this.name,val:[]})
      }
      // this.$emit('func',{name:this.name,val:this.value})
    }
  },
}
</script>
<style lang="scss" scoped>
.compitem{
  .compname{
    font-size: 14px;
    // padding: 0 15px;
    // padding-right:15px;
    width: 90px;


  }
  width: 100%;
  display: flex;
   align-items: center;
}
</style>